<!DOCTYPE html>
<html>
	<head>
		<title>经纬度坐标系图层cccc</title>
		<!--引用需要的脚本 注意：SuperMap.Include.js内部已经动态引用相关JS，CSS文件-->
		<script src="./libs/SuperMap.Include.js"></script>
	
	</head>
	<body onload="init()">
		<!--地图显示的div-->
		<div id="map" style="position: absolute; left: 0px; right: 0px; width: auto; height: 98%;"></div>
	</body>
</html>
	<script>
			//声明全局变量 map、layer、url
			var map, layer, url = "http://172.16.51.236:8090/iserver/services/map-tianditu2/rest/maps/矢量底图_经纬度";
			var urltwo = "http://172.16.51.236:8090/iserver/services/map-tianditu2/rest/maps/矢量中文注记_经纬度";
		  var	url2 = "http://support.supermap.com.cn:8090/iserver/services/data-DynamicData/rest/data";
			var vectors; //声明图层()1111
			var markers; //声明图层()1111
			var markerone; //声明图层()1111
			var vectorInfoWin; //声明矢量点击弹窗
			var markerInfoWin; //声明标记点击弹窗
			var style = //声明样式
				{
					externalGraphic: "./theme/images/cluster1.png",
					fillColor: "#339933",
					fillOpacity: 1,
					strokeOpacity: 0,
					pointRadius: 12
				};
			var styleq = //声明样式
				{
					externalGraphic: "./theme/images/cluster2.png",
					fillColor: "#339933",
					fillOpacity: 1,
					strokeOpacity: 0,
					pointRadius: 12
				};
			function init() {

				//1.在指定DOM元素上初始化地图对象。
				map = new SuperMap.Map("map", {
					allOverlays: true
				});
				//2.添加控件。
				map.addControl(new SuperMap.Control.ScaleLine()); //地图比例尺控件
				map.addControl(new SuperMap.Control.LayerSwitcher()); //图层控制显示控件
				map.addControl(new SuperMap.Control.MousePosition()); //经纬度实时显示控件
				//2.初始化图层。
				//创建分块动态REST图层，该图层显示iserver 8C 服务发布的地图,
				//其中"想要"为图层名称，url图层的服务地址，{transparent: true}设置到url的可选参数
				layer = new SuperMap.Layer.TiledDynamicRESTLayer("矢量底图_经纬度", url, null, {
					maxResolution: "auto"
				});
				//其中"想要"为图层名称，url图层的服务地址，{transparent: true}设置到url的可选参数
				urltwo = new SuperMap.Layer.TiledDynamicRESTLayer("矢量中文注记_经纬度", urltwo, null, {
					maxResolution: "auto"
				});
				//构建 矢量类覆盖物 图层。()2222222
				vectors = new SuperMap.Layer.Vector("Vectors");
				//构建 标记类覆盖物 图层。()222222
				markers = new SuperMap.Layer.Markers("Markers");
				//构建 标记类覆盖物 图层。()222222
				markerone = new SuperMap.Layer.Markers("Markerone");
				//构建 矢量类覆盖物 图层。()2222222

		
				//监听图层信息加载完成事件，异步加载图层。
				layer.events.on({
					"layerInitialized": addLayer
				});
			//	vctor(); //执行添加矢量图层
				car(); //执行添加标记图层1
				go(); //执行添加标记图层2
			}

			function addLayer() {
				//将Layer图层加载到Map对象上。3333333333
				map.addLayers([layer, urltwo, vectors, markers, markerone]);
				//出图，设置中心点，指定放缩级别。//设置中心点，指定放缩级别。114.06932,33.60236
				map.setCenter(new SuperMap.LonLat(120.31267, 32.86722), 12);
			}
			var xx = 114.06932;
			var yy = 33.60236;
			//aa第一个矢量类要素覆盖物
			function vctor() {
				//a1. 生成一个矢量要素覆盖物，并添加到矢量图层。
				//构建点几何对象类
				var point = new SuperMap.Geometry.Point(xx, yy);
				//构建矢量要素覆盖物
				var pointVector = new SuperMap.Feature.Vector(point);
				//修改点样式红色
				pointVector.style = {
					fillColor: "red",
					strokeColor: "yellow",
					pointRadius: 10,
					externalGraphic: "./theme/images/cluster1.png",
				};
				//添加 矢量要素覆盖物 到 矢量图层
				vectors.addFeatures(pointVector);
			}

            var wxpArr0=[[120.30179,32.87497],[120.30389,32.86613],[120.32042,32.86896],[120.32600,32.86063]];
			var wxpArr1=[[120.27551,32.88773],[120.27585,32.87306],[120.27748,32.86404],[120.28658,32.86362]];
			var wxpArr2=[[120.26100,32.85538],[120.27765,32.85546],[120.28967,32.85546],[120.29619,32.85975]];
			var wxpArrN =[wxpArr0,wxpArr1,wxpArr2];
			//固定标记类覆盖物
			//b1.第1个标记类覆盖物
			function car() {
				//初始位置
				   for(var i = 0;i<wxpArrN.length;i++){
					   //添加标记类覆盖物SuperMap.Size 用来描绘一对高宽值的实例
					   var siz = new SuperMap.Size(30, 30);
					   //依据size创建屏幕坐标
					   //SuperMap.Pixel 此类用x, y坐标描绘屏幕坐标
					   var offse = new SuperMap.Pixel(-(siz.w / 2), -siz.h);
					   //SuperMap.Icon 创建图标，在网页中表现为div标签中的image标签
					   if(i==0){
						   var ico = new SuperMap.Icon('./theme/images/cluster1.png', siz, offse);
					   }
					   if(i==1){
					   	var ico = new SuperMap.Icon('./theme/images/cluster2.png', siz,offse);
					   }
					   if(i==2){
					   	var ico = new SuperMap.Icon('./theme/images/cluster3.png', siz,offse);
					   }
					   //依据位置和大小初始化标记覆盖物
					   carMarker = new SuperMap.Marker(new SuperMap.LonLat(wxpArrN[i][0][0], wxpArrN[i][0][1]), ico);
					   //添加 标记覆盖物 到 标记图层
					   markers.addMarker(carMarker);  
				   }
					var gjc_index = 0;
				//定时刷新位置
				gjcInterval = setInterval(function() {
					refresh_gjc(gjc_index);
					gjc_index++;
				}, 2000);
			
				
				//注册 click 事件,触发 mouseClickHandler()方法
				markers.events.on({
					"click": mouseClickHandler
				});
			}
			//gis移动位置
			var wxpPopup =null;
		function refresh_gjc(gjc_index) {
			if (wxpPopup != null) {
				wxpPopup.destroy();
				wxpPopup = null;
			}
		    markers.destroy();
			markers = new SuperMap.Layer.Markers("markers");
				var size = new SuperMap.Size(24,24);
				var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
				
            for(var i=0;i<wxpArrN.length;i++){
				if(i==0){
					var icon = new SuperMap.Icon('./theme/images/cluster1.png', size,offset);
					var contentHTML = "<div class='title_kc'>";
					contentHTML += "<div class='kc_title'><span>船舶信息</span></div>";
					contentHTML += "<div class='popoverkc'>状态：正常行驶</div>";
					contentHTML += "<div class='popoverkc'>当前位置：中路</div>";
					contentHTML += "<div class='popoverkc' style='color:#F00'>速度51 km/h</div>";
					contentHTML += "<div class='popoverkc'>船舶识别号：DGK253E6</div>";
					contentHTML += "<div class='popoverkc'>船舶类型：货船</div>";
					contentHTML += "</div>";
					var lonLat = new SuperMap.LonLat(wxpArrN[0][gjc_index+1][0], wxpArrN[0][gjc_index+1][1]);
					var popwin = new SuperMap.Popup.Anchored('wxpPopWin',
							lonLat, new SuperMap.Size(220, 168), contentHTML,
							null, true, //是否显示关闭按钮
							null);
					if (wxpPopup) {
						map.removePopup(wxpPopup);
					}
					wxpPopup = popwin;
					//wxpPopup.setBackgroundColor("rgba(28,35,43,0.8)");
					map.addPopup(wxpPopup, false); //false是指弹出窗口之前先关闭其他按钮
				}
				if(i==1){
					var icon = new SuperMap.Icon('./theme/images/cluster2.png', size,offset);
				}
				if(i==2){
					var icon = new SuperMap.Icon('./theme/images/cluster3.png', size,offset);
				}
				marker = new SuperMap.Marker(new SuperMap.LonLat(wxpArrN[i][gjc_index+1][0],wxpArrN[i][gjc_index+1][1]), icon);
				 				markers.addMarker(marker);
				 				map.addLayers([ markers ]);
			}

			//清除定时器
			if (gjc_index == 2) {
				clearInterval(gjcInterval);
				//一直执行
				gjc_index =-1;
				gjcInterval = setInterval(function() {
					refresh_gjc(gjc_index);
					gjc_index++;
				}, 2000);
				
			}
		}
			
			
			
			//c1.第二个标记类覆盖物
			function go() {
				//SuperMap.Size 用来描绘一对高宽值的实例
				var sizee = new SuperMap.Size(30, 30);
				//依据size创建屏幕坐标
				//SuperMap.Pixel 此类用x, y坐标描绘屏幕坐标
				var offsett = new SuperMap.Pixel(-(sizee.w / 2), -(sizee.h));
				//SuperMap.Icon 创建图标，在网页中表现为div标签中的image标签
				var icons = new SuperMap.Icon('./theme/images/ju.png', sizee, offsett);
				//依据位置和大小初始化标记覆盖物
				goMarker = new SuperMap.Marker(new SuperMap.LonLat(114.06933, 33.60279), icons);
				//添加 标记覆盖物 到 标记图层
				markerone.addMarker(goMarker);
				//注册 click 事件,触发 mouseClickHandler()方法
				markerone.events.on({
					"click": mouseClickHandler
				});
			}
			//点击标记覆盖物，触发click事件会调用此函数。公共方法
			function mouseClickHandler(event) {
				closeMarkerInfoWin(); //销毁弹窗。
				//console.log(this)
				//	console.log(this.name)
				//SuperMap.Size 用来描绘一对高宽值的实例
				var size = new SuperMap.Size(30, 30);
				if (this.name == "Markers") { //一号仓库数据
					var textHTML = "<div style='width:200px'>";
					textHTML += '<p>仓库：<span>1号仓库</span></p>';
					textHTML += '<p>可用库存量：<span>1221</span></p>';
					textHTML += '<p>仓库负责人：<span>张某某</span></p>';
					textHTML += "</div>";
					//标记覆盖物的坐标,地图上弹窗显示的位置。
					var markerlonlat = new SuperMap.LonLat(114.06932, 33.60236);
				}
				if (this.name == "Markerone") { //二号仓库数据
					var textHTML = "<div style='width:200px'>";
					textHTML += '<p>仓库：<span>2号仓库</span></p>';
					textHTML += '<p>可用库存量：<span>1000</span></p>';
					textHTML += '<p>仓库负责人：<span>李某某</span></p>';
					textHTML += "</div>";
					//标记覆盖物的坐标,地图上弹窗显示的位置。
					var markerlonlat = new SuperMap.LonLat(114.07, 33.60236);
				}
				//构建固定位置浮动弹窗，自适应显示.仓库数据展示公共方法
				var popup = new SuperMap.Popup.Anchored(
					this.name, //唯一标识
					markerlonlat, //标记覆盖物的坐标,地图上弹窗显示的位置。
					new SuperMap.Size(220, 140), //弹窗内容的大小
					textHTML, //弹窗内容HTML的字符串表达
					null, //锚点。同image标签
					true, //是否显示关闭按钮。
					null); //弹窗关闭事件回调处理。
				popup.autoSize = true;
				markerInfoWin = popup;
				map.addPopup(popup);
			}
			// 销毁 Popup.Anchored 弹窗。
			function closeMarkerInfoWin() {
				if (markerInfoWin) {
					markerInfoWin.hide();
					markerInfoWin.destroy();
				}
			}


			//矢量要素点击事件
			// 点击矢量要素覆盖物，触发调用此函数。
			function onFeatureSelected(feature) {
				closeVectorInfoWin();
				console.log(feature)
				var id = feature.attributes.FEATUREID;
				if (id == 0) { //一号船舶数据
					var textHTML = "<div style='overflow-x:hidden;'>";
					textHTML += '<div style="margin-left:6%;margin-top:2%;">船舶：<span>WAN XIN 666</span></div>'
					textHTML += "</div>";
					//覆盖物的坐标,地图上弹窗显示的位置。
					//var markerlonlat = new SuperMap.LonLat(pointq);
				}
				if (id == 1) { //二号船舶数据
					var textHTML = "<div style='overflow-x:hidden;'>";
					textHTML += '<div style="margin-left:6%;margin-top:2%;">船舶：<span>WAN XIN 19</span></div>'
					textHTML += "</div>";
					//覆盖物的坐标,地图上弹窗显示的位置。
				//	var markerlonlat = new SuperMap.LonLat(point);
				}
			//	console.log(feature.attributes.FEATUREID)
				
				var lonLat = map.getCenter();
				//创建一个具有指向和边框的浮动弹窗
				var popup = new SuperMap.Popup.Anchored(
					id, //唯一标识
					lonLat, //标记覆盖物的坐标,地图上弹窗显示的位置。
					new SuperMap.Size(420,220),
					textHTML, //弹窗内容HTML的字符串表达
					null,
					true); //是否显示关闭按钮。
				vectorInfoWin = popup;
				//在地图中添加弹出窗口
				map.addPopup(popup);
			};
			//销毁 Popup.FramedCloud 弹窗。
			function closeVectorInfoWin() {
				if (vectorInfoWin) {
					vectorInfoWin.hide();
					vectorInfoWin.destroy();
				}
			}
		</script>